// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;

@import 'common/index.scss';

@include bem_b(modal) {
	width: 650rpx;
	@include VueAndNvueStyleAttr('border-radius', 'modal', 'radius');
	overflow: hidden;

	@include bem_e(title) {
		@include VueAndNvueStyleAttr('font-size', 'modal', 'title-font-size');
		font-weight: bold;
		@include VueAndNvueStyleAttr('color', 'modal', 'title-color');
		text-align: center;
		padding-top: 25px;
	}

	@include bem_e(content) {
		padding: 12px 25px 25px 25px;
		@include flex;
		justify-content: center;

		&__text {
			font-size: 15px;
			@include VueAndNvueStyleAttr('color', 'modal', 'title-color');
			flex: 1;
		}
	}

	@include bem_e(button-group) {
		@include flex;

		&--confirm-button {
			flex-direction: column;
			padding: 0px 25px 15px 25px;
		}

		&__wrapper {
			flex: 1;
			@include flex;
			justify-content: center;
			align-items: center;
			height: 48px;

			&--confirm,
			&--only-cancel {
				@include VueAndNvueStyleAttr('border-bottom-right-radius', 'modal', 'radius');
			}

			&--cancel,
			&--only-confirm {
				@include VueAndNvueStyleAttr('border-bottom-left-radius', 'modal', 'radius');
			}

			@include bem_m(hover) {
				@include VueAndNvueStyleAttr('background-color', 'bg-color', '');
			}

			&__text {
				@include VueAndNvueStyleAttr('color', 'text-color', 'regular');
				@include VueAndNvueStyleAttr('font-size', 'modal', 'button-font-size');
				text-align: center;
			}
		}
	}
}
